<template>
	<!--更换手机 -->
	<view class="page-content">
		<view class="page-top">当前手机号为：{{mobile}}</view>
		<view class="page-body">
				<!-- 输入界面 -->
				<view class="login_input_box">
					<view class="input-group">
						<view class="input-row">
							<image class="icon-tb" src="/static/login/shouji.png"></image>
							<input class="input-row-w" type="number" v-model="params.mobile" placeholder="输入新的手机号"
								 placeholder-style="color:#999"></input>
						</view>
						<view class="input-row-code">
							<view class="input-row-code-l">
								<image class="icon-tb" src="/static/login/yanzhengma2.png"></image>
								<input type="number" class="input-row-w" clearable v-model="params.code" placeholder="输入验证码" :maxLength="6" placeholder-style="color:#999"></input>
							</view>
							<view class="input-row-code-r">
								<button size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
							</view>
						</view>
						<view class="btn-row">
							<button type="primary" class="" @tap="bindLogin">确认</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		sendSmss,
		changePhones
	} from '@/common/api.js';
	import  store  from '@/store'
	import wTit from '@/components/w-tit/w-tit-back.vue';
	export default {
		components: {
			wTit
		},
		data() {
			return {
				params: {
					mobile: '',
					code:'',
					type:3
				},
				mobile:'',
				btnText:'获取验证码',
				btnDis:false,
			}
		},
		computed: {
			
		},
		onLoad(option) {
			console.log(222,option)
			if(option.mobile){
				this.mobile = option.mobile;
			}
		},
		methods: {
			...mapActions('user',['setToken']),
			//忘记密码
			bindLogin(){
				let resdata = this.params;
				let _self = this;
				if (resdata.mobile === "") {
					uni.showToast({
						title: "手机号码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resdata.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号码！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (resdata.code === "") {
					uni.showToast({
						title: "验证码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				
				changePhones(resdata).then(res =>{
					if(res.code === 2000){
						uni.showToast({
							title: '手机号码修改成功！',
							icon: 'none',
							duration: 2000
						})
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 发送验证码
			async sendCode() {
				let resdata = this.params;
				if (resdata.phone === "") {
					uni.showToast({
						title: "手机号码不能为空！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(resdata.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号码！",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				sendSmss(resdata).then(res =>{
					if(res.code === 2000){
						
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
				// 开启倒计时
				this.countDown();
			},
			
			// 验证码倒计时
			countDown() {
				let t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(t);
				this.btnText = `${timer}s`;
				t = setInterval(() => {
					if (timer == 0) {
						clearInterval(t);
						this.btnText = '重新发送';
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}
	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}
	.icon-tb {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}
	.page-content {
		display: flex;
		flex-direction: column;
		.page-top {
			display: flex;
			padding: 0 30rpx;
			background: $uni-bg-color-grey;
			height: 80rpx;
			font-size: 26rpx;
			color: #333;
			line-height: 80rpx;
		}
		.page-body {
			height: calc(100% - 80rpx);
			.login_input_box {
				display: flex;
				flex: 1;
			
				.input-group {
					display: flex;
					flex: 1;
					flex-direction: column;
					padding:0 30rpx;
					
					.input-row-code {
						width: 100%;
						display: flex;
						align-items: center;
						flex: 1;
						height: 84rpx;
						flex-direction: row;
						background: $uni-bg-box-color;
						padding: 0 10rpx;
						margin-top: 30rpx;
						border-bottom: 1rpx solid rgba(191, 191, 191, .75);
					
						.input-row-code-l {
							flex: 65;
							display: flex;
							align-items: center;
							margin-right: 10rpx;
							.input-row-w {
								display: flex;
								flex: 1;
								width: 100%;
								color: $font-color-3;
								font-size: 28rpx;
							}
						}
					
						.input-row-code-r {
							flex: 35;
							display: flex;
							justify-content: flex-end;
							align-items: flex-end;
					
							button {
								width: 200rpx;
								height: 84rpx;
								line-height: 84rpx;
								padding: 0 10rpx;
								font-size: 28rpx;
								background: (0,0,0,0);
								border-radius: 0rpx;
								color: $font-color-b3;
								text-align: right;
							}
					
						}
					}
			
					.input-row {
						display: flex;
						align-items: center;
						padding: 0 10rpx;
						flex: 1;
						width: 100%;
						height: 84rpx;
						border-bottom: 1rpx solid rgba(191, 191, 191, .75);
						flex-direction: row;
						background: $uni-bg-box-color;
						margin-top: 30rpx;
			
						.input-row-w {
							display: flex;
							flex: 1;
							width: 100%;
							height: 84rpx;
							color: $font-color-3;
							font-size: 28rpx;
						}
					}
					
					.btn-row {
						margin-top: 60rpx;
						padding: 0 10rpx;
			
						button {
							line-height: 100rpx;
							background: $uni-but-bg-color;
							font-size: 36rpx;
							color: $font-color-w;
							height: 100rpx;
							box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.19);
							border-radius: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
